<template>
    <div class="common-layout">
        <el-container>
            <el-header>
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="账号">
                        <el-input v-model="formInline.accountName" placeholder="请输入账号" clearable />
                    </el-form-item>
                    <el-form-item label="真实姓名">
                        <el-input v-model="formInline.realName" placeholder="请输入真实姓名" clearable />
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                        <el-button type="danger" @click="AllDelway()">批量删除</el-button>
                        <el-button type="primary" @click="openAdd = true"
                            v-if="pinia.piniaDto.roleName == '管理员'">新增</el-button>
                    </el-form-item>
                </el-form>
            </el-header>
            <el-main>
                <el-table :data="tableData" border @selection-change="GetData" style="width: 100%">
                    <el-table-column type="selection" width="55" />
                    <el-table-column type="index" prop="date" label="序号" width="80" />
                    <el-table-column prop="accountName" label="账号" width="120" />
                    <el-table-column prop="realName" label="真实姓名" width="120" />
                    <el-table-column prop="age" label="年龄" width="120" />
                    <el-table-column prop="phone" label="联系方式" width="120" />
                    <el-table-column prop="roleName" label="角色" width="120" />
                    <el-table-column prop="addr" label="地址" width="120" />
                    <el-table-column prop="info" label="简介" width="120" />
                    <el-table-column fixed="right" label="操作" min-width="120">
                        <template v-slot="scoped">
                            <el-button type="primary" @click="Openupdateway(scoped.row)">
                                详情
                            </el-button>
                            <el-button type="danger" @click="ClientDelway(scoped.row)"
                                v-if="pinia.piniaDto.roleName == '管理员'">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <el-pagination v-model:current-page="page.pageindex" v-model:page-size="page.pagesize"
                                    background :page-sizes="[2, 4, 6, 8]" :size="page.pagesize" :pager-count="3"
                                    layout="total, sizes, prev, pager, next, jumper" prev-text="上一页" next-text="下一页"
                                    :total="page.totalcount" />
                            </td>
                        </tr>
                    </tbody>
                </table>
                <!-- 客户新增对话框 -->
                <el-dialog v-model="openAdd" title="供应商新增" width="500">
                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="AddData" :rules="rules"
                        label-width="auto">
                        <el-form-item label="用户名" prop="accountName">
                            <el-input v-model="AddData.accountName" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item label="密码" prop="accountPwd">
                            <el-input show-password v-model="AddData.accountPwd" placeholder="请输入密码" />
                        </el-form-item>
                        <el-form-item label="真实姓名" prop="realName">
                            <el-input v-model="AddData.realName" placeholder="请输入真实姓名" />
                        </el-form-item>
                        <el-form-item label="年龄" prop="realName">
                            <el-input v-model="AddData.age" placeholder="请输入年龄" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="AddData.phone" placeholder="请输入手机号" />
                        </el-form-item>
                        <el-form-item label="地址" prop="addr">
                            <el-input v-model="AddData.addr" placeholder="请输入地址" />
                        </el-form-item>
                        <el-form-item label="简介" prop="info">
                            <el-input v-model="AddData.info" style="width: 400px" :rows="4" type="textarea"
                                placeholder="请输入供应商简介" />
                        </el-form-item>
                        <el-form-item label="角色" prop="roleId">
                            <el-select v-model="AddData.roleId" placeholder="请选择角色">
                                <el-option label="请选择" value="" />
                                <el-option v-for="item in Roles" :label="item.roleName" :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="部门" prop="departmentId">
                            <el-select v-model="AddData.departmentId" placeholder="请选择部门">
                                <el-option label="请选择" value="" />
                                <el-option v-for="item in Departments" :label="item.departmentName" :value="item.id" />
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="ClientAddway()" v-if="pinia.piniaDto.roleName == '管理员'">
                                保存
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
                <!-- 客户编辑对话框 -->
                <el-dialog v-model="openUpdate" title="供应商编辑" width="500">
                    <el-form ref="ruleFormRef" style="max-width: 600px" :model="AddData" :rules="rules"
                        label-width="auto">
                        <el-form-item label="用户名" prop="accountName">
                            <el-input v-model="AddData.accountName" placeholder="请输入用户名" />
                        </el-form-item>
                        <el-form-item label="密码" prop="accountPwd">
                            <el-input show-password v-model="AddData.accountPwd" placeholder="请输入密码" />
                        </el-form-item>
                        <el-form-item label="真实姓名" prop="realName">
                            <el-input v-model="AddData.realName" placeholder="请输入真实姓名" />
                        </el-form-item>
                        <el-form-item label="年龄" prop="realName">
                            <el-input v-model="AddData.age" placeholder="请输入年龄" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="AddData.phone" placeholder="请输入手机号" />
                        </el-form-item>
                        <el-form-item label="地址" prop="addr">
                            <el-input v-model="AddData.addr" placeholder="请输入地址" />
                        </el-form-item>
                        <el-form-item label="简介" prop="info">
                            <el-input v-model="AddData.info" style="width: 400px" :rows="4" type="textarea"
                                placeholder="请输入供应商简介" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="ClientUpdateway()">
                                保存
                            </el-button>
                            <el-button @click="resetForm(ruleFormRef)">重置</el-button>
                        </el-form-item>
                    </el-form>
                </el-dialog>
            </el-main>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import axios from 'axios';
import { ElMention, ElMessage, ElMessageBox } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { useCounterStore } from '@/stores/counter';
const ruleFormRef = ref<FormInstance>()
const pinia = useCounterStore();
//校验
const rules = reactive<FormRules>({
    name: [
        { required: true, message: 'Please input Activity name', trigger: 'blur' },
        { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
    ],
})
onMounted(() => {
    onSubmit();
    GetRoles();
    GetDepartments();
})
const formInline = reactive({
    accountName: '',
    realName: ''
})
const page = reactive({
    pageindex: 1,
    pagesize: 4,
    totalcount: 0
})
const tableData = ref([])
//供应商显示
const onSubmit = () => {
    axios.get("/api/Accounts/SupplierGet", {
        params: {
            pageindex: page.pageindex,
            pagesize: page.pagesize,
        }
    }).then(res => {
        tableData.value = res.data.totalPage;
        page.totalcount = res.data.totalcount;
    })
}
//侦听器
watch(page, () => {
    onSubmit();
})
const Roles = ref([{
    "id": null,
    "roleName": ""
}])
//获取角色下拉
const GetRoles = () => {
    axios.get("/api/Accounts/RoleGet", {}).then(res => {
        Roles.value = res.data.data
    })
}
const Departments = ref([{
    "id": null,
    "departmentName": ""
}])
//获取部门下拉
const GetDepartments = () => {
    axios.get("/api/Accounts/GetDepartments", {}).then(res => {
        Departments.value = res.data.data
    })
}
//打开对话框
const openAdd = ref(false);
//添加变量
const AddData = reactive({
    "id": null,
    "accountName": "",
    "accountPwd": "",
    "realName": "",
    "age": null,
    "phone": "",
    "addr": "",
    "info": "",
    "roleId": null,
    "departmentId": null
})
//客户新增
const ClientAddway = () => {
    axios.post("/api/Accounts/ClientAdd", AddData).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.message);
            openAdd.value = false;
            onSubmit();
        }
        else {
            ElMessage.error(res.data.message);
        }
    })
}
// 重置
const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return
    formEl.resetFields()
}
//打开编辑对话框
const openUpdate = ref(false);
const Openupdateway = (row: any) => {
    openUpdate.value = true;
    console.log(row);
    Object.assign(AddData, row)
}
//客户编辑
const ClientUpdateway = () => {
    axios.put("/api/Accounts/AccountUpdate", AddData).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.message);
            openAdd.value = false;
            onSubmit();
        }
        else {
            ElMessage.error(res.data.message);
        }
    })
}
//客户删除
const ClientDelway = (row: any) => {
    ElMessageBox.confirm(
        '确认删除客户账号吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        axios.put("/api/Accounts/AccountDel", { accountId: row.id }).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message);
                onSubmit();
            }
            else {
                ElMessage.error(res.data.message);
            }
        })
    })
}
var strids = ref("")  //定义字符串
//获取主键组成的字符串
const GetData = (arrays: [{ id: any }]) => {
    if (arrays.length > 0) {
        strids.value = arrays.map(x => x.id).toString();
        ElMessage.success(strids.value);
    } else {
        ElMessage.error("请选择要删除的数据");
    }
}
//客户删除
const AllDelway = () => {
    ElMessageBox.confirm(
        '确认删除客户账号吗?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        axios.put("/api/Accounts/MoreDel", { ids: strids.value }).then(res => {
            if (res.data.code == 200) {
                ElMessage.success(res.data.message);
                onSubmit();
            }
            else {
                ElMessage.error(res.data.message);
            }
        })
    })
}
</script>

<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>